<template>
  <div class="page" :loading="loading">
    <NormalInfo :data="data" />

    <div class="goods-info app-container">
      <el-descriptions title="商品信息"> </el-descriptions>
      <el-divider />
      <div class="flex-center">
        <StaticTable :tableList="tableList">
          <el-table-column label="商品名称" align="center" prop="productName" width="120" />
          <el-table-column label="商品主图" align="center" width="130">
            <template #default="{ row }">
              <el-image
                style="width: 120px; height: 120px"
                :src="row.productHeadimg"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-teleported="true"
                :preview-src-list="[row.productHeadimg]"
                fit="contain"
              />
            </template>
          </el-table-column>
          <el-table-column label="销售价格" align="center" prop="sellPrice" />
          <el-table-column
            v-if="data.status === 4"
            label="退款价格"
            align="center"
            prop="sellPrice"
          />
        </StaticTable>
      </div>
    </div>

    <div class="flex-center app-container">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </div>
</template>

<script setup name="orderDetail">
import NormalInfo from './components/NormalInfo'
import { getProductOrderDetailApi } from '@/api/shopping'

const route = useRoute()
const { proxy } = getCurrentInstance()

const loading = ref(false)
const data = ref({})

const tableList = ref([])

async function getOrderDetail(id) {
  loading.value = true

  try {
    console.log({ id })
    const r = await getProductOrderDetailApi(id)
    console.log({ r })
    data.value = r?.data || {}
    tableList.value = [
      {
        productName: r?.data?.productName,
        productHeadimg: r?.data?.productHeadimg,
        refundPrice: r.sttaus === 4 ? r?.data?.sellPrice : '',
        sellPrice: r?.data?.sellPrice
      }
    ]
    console.log('tableList.value', tableList.value)
  } finally {
    loading.value = false
  }
}

watch(
  () => route.query.id,
  (id) => {
    id && getOrderDetail(id)
  },
  {
    immediate: true
  }
)

function handleClose() {
  proxy.$tab.closePage()
}
</script>

<style lang="scss" scoped>
.page {
  background-color: var(--el-bg-color-page);
}
.app-container {
  background-color: #fff;
}

.goods-info {
  margin: 30px 0;
}
</style>
